<template>
  <!-- 我的资金 -->
  <div class="price_styl">
    <div class="bill_search">
      <div class="title_styl">
        <div class="title_left">
          <Lines
            class="line_styl"
            backColor="#2973E4"
            widthNum="6px"
            heightNum="30px"
          ></Lines>
          <div class="title_name">我的资金</div>
        </div>
      </div>
      <div class="search_content">
        <div class="bill_status">
          <div class="status_title">业务类型</div>
          <div
            class="status_name"
            @click="MX_chooseDataFun('type',item)"
            :class="[MX_searchparams.type == item.value ? 'status_nameCopy' : '']"
            v-for="(item, index) in tabsStatus"
            :key="index"
          >{{ item.name }}</div>
        </div>
        <div class="bill_status time_styl">
          <div class="status_title">日期选择</div>
          <div
            class="status_name"
            @click="MX_chooseDataFun('time',item)"
            :class="[MX_searchparams.time == item.value ? 'status_nameCopy' : '']"
            v-for="(item, index) in timeInterval"
            :key="index"
          >{{ item.value }}</div>
          <div class="time_choose">
            <div class="time_title">范围</div>
            <DatePicker
              v-model="MX_timeParams.startTime"
              @on-change="MX_chooseTimeFun('startTime',$event)"
              type="datetime"
              placeholder="开始日期"
              size="small"
              style="width: 120px"
            ></DatePicker> &nbsp;-&nbsp;
            <DatePicker
              v-model="MX_timeParams.endTime"
              @on-change="MX_chooseTimeFun('endTime',$event)"
              type="datetime"
              placeholder="结束日期"
              size="small"
              style="width: 120px"
            ></DatePicker>
            <div
              class="btn_search"
              @click="MX_handleSubmit"
            >搜索</div>
            <div
              class="btn_reset"
              @click="MX_handleReset"
            >重置</div>
          </div>
        </div>
      </div>
    </div>
    <div class="company_price">
      <div class="title_styl">
        <div class="title_left">
          <Lines
            class="line_styl"
            backColor="#2973E4"
            widthNum="6px"
            heightNum="30px"
          ></Lines>
          <div class="title_name">公司总金额</div>
        </div>
      </div>
      <div class="price_num">
        <div class="price_item">
          <div class="item_num">{{ store_userInfo.amount || 0 }} 元</div>
          <div class="item_title">总金额</div>
        </div>
        <div class="price_item">
          <div class="item_num">{{ store_userInfo.nowAmount || 0 }} 元</div>
          <div class="item_title">可用余额</div>
        </div>
        <div class="price_item">
          <div class="item_num">{{ store_userInfo.frozenAmount || 0 }} 元</div>
          <div class="item_title">占用余额</div>
        </div>
      </div>
      <div class="company_styl">
        <div class="company_name">
          <Select
            style="width:260px"
            placeholder="请选择公司"
            @on-change="chooseCompanyFun($event)"
          >
            <Option
              v-for="item in companyList"
              :value="item.orgCode"
              :key="item.id"
            >{{ item.orgName }}</Option>
          </Select>
        </div>
        <div class="company_ptice">
          <Spin
            fix
            v-if="infoLoading"
          ></Spin>
          <div class="cprice_item">
            <Icons
              font="#icon-kyye"
              class="icon-kyye margin4"
              fontSize="16px"
            ></Icons>可用余额 <span class="cprice_num">{{ moneyInfo.nowAmount || 0 }}</span>
          </div>
          <div class="cprice_item">
            <Icons
              font="#icon-zyye"
              class="icon-zyye margin4"
              fontSize="16px"
            ></Icons>占用余额 <span class="cprice_num">{{ moneyInfo.frozenAmount || 0 }}</span>
          </div>
          <div class="cprice_item">
            <Icons
              font="#icon-zje"
              class="icon-zje margin4"
              fontSize="16px"
            ></Icons>总金额 <span class="cprice_num">{{ moneyInfo.amount || 0 }}</span>
          </div>
        </div>
      </div>
    </div>

    <Table
      stripe
      :height="400"
      :loading="MX_tableLoading"
      :columns="columns1"
      :data="MX_DataList"
    >
      <template
        slot-scope="{ row }"
        slot="type"
      >
        <Tag :color="typeName[row.type].color">{{typeName[row.type].name}}</Tag>
      </template>
    </Table>
    <div class="page_styl">
      <Page
        v-if="MX_DataList.length != 0"
        :page-size="MX_pageSize"
        :total="MX_total"
        @on-change="MX_changePage"
        show-total
      />
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { mapMutations, mapGetters, mapActions } from "vuex";
import searchListMinxins from '@/mixins/searchListMinxins';
import { myMixins } from '@/mixins/base';

export default {
  components: {},
  mixins: [searchListMinxins, myMixins],
  data() {
    return {
      MX_searchparams: {
        type: '999',
        time: '当天',
      }, // 搜索内容
      MX_DataList: [],
      chooseCompanyId: '',
      moneyInfo: {},
      tabsStatus: [
        {
          name: "全部",
          value: "999"
        },
        {
          name: "充值",
          value: "0"
        },
        {
          name: "退款",
          value: "1"
        },
        // {
        //   name: "其他",
        //   value: "2"
        // },
        // {
        //   name: "已作废",
        //   value: "3"
        // }
      ],
      timeInterval: [
        {
          value: "当天",
          startTime: dayjs().format("YYYY-MM-DD" + " 00:00:01"),
          endTime: dayjs().format("YYYY-MM-DD" + " 23:59:59")
        },
        {
          value: "近三天",
          startTime: dayjs().subtract(3, 'day').format("YYYY-MM-DD" + " 00:00:01"),
          endTime: dayjs().format("YYYY-MM-DD" + " 23:59:59")
        },
        {
          value: "近七天",
          startTime: dayjs().subtract(7, 'day').format("YYYY-MM-DD" + " 00:00:01"),
          endTime: dayjs().format("YYYY-MM-DD" + " 23:59:59")
        },
        {
          value: "近一月",
          startTime: dayjs().subtract(30, 'day').format("YYYY-MM-DD" + " 00:00:01"),
          endTime: dayjs().format("YYYY-MM-DD" + " 23:59:59")
        },
      ],
      typeName: {
        0: { name: "充值", color: "magenta" },
        1: { name: "退款", color: "red" },
        2: { name: "扣款", color: "cyan" },
        10: { name: "购买冻结", color: "volcano" },
        11: { name: "解冻(退款)", color: "magenta" },
        12: { name: "交保证金", color: "orange" },
        13: { name: "扣保证金", color: "gold" },
        14: { name: "结算扣钱", color: "yellow" },
        15: { name: "第二天作废冻结", color: "lime" },
        16: { name: "合同剩余冻结", color: "green" },
        17: { name: "制卡超时冻结", color: "cyan" },
        18: { name: "专款专用补钱冻结", color: "blue" },
        19: { name: "少于计划量冻结", color: "geekblue" },
        21: { name: "退卡冻结", color: "purple" },
        30: { name: "竞拍报名冻结", color: "#FFA2D3" }
      },
      companyList: [],
      ruleValidate: {},
      columns1: [
        {
          title: "业务类型",
          key: "type",
          slot: "type",
          align: "center"
        },
        {
          title: "业务内容",
          key: "msg",
          align: "center"
        },
        {
          title: "金额",
          key: "price",
          align: "center"
        },
        {
          title: "可用金额",
          key: "balance",
          align: "center",
          width: 220
        },
        {
          title: "业务时间",
          key: "createTime",
          align: "center"
        }
      ],
      MX_apis: 'API_moneyList', // 接口地址
      infoLoading: false
    }
  },

  computed: {
    ...mapGetters(["store_userInfo"]),
  },
  mounted() {
    this.get_userInfo();
    this.MX_companyList();
  },
  methods: {
    ...mapActions(['get_userInfo']),

    //筛选框重置
    MX_handleReset() {
      //重置筛选框内容
      this.MX_searchparams = {
        type: '999',
        time: '当天',
        startTime: dayjs().format("YYYY-MM-DD" + " 00:00:01"),
        endTime: dayjs().format("YYYY-MM-DD" + " 23:59:59")
      }
      this.MX_timeParams = {
        startTime: '',
        endTime: '',
      }
      this.MX_pageNo = 1;
      this.MX_getData();
    },
    MX_getDataBefore() {
      this.MX_constSearchData = {
        customerCompanyCode: this.chooseCompanyId,
        customerId: this.store_userInfo.id,
      }
    },
    chooseCompanyFun(even) {
      this.chooseCompanyId = even;
      this.getCompanyMoney();
      this.MX_handleReset();
    },
    // 各公司资金余额
    getCompanyMoney() {
      this.infoLoading = true;
      let data = {
        companyCode: this.chooseCompanyId,
        customerId: this.store_userInfo.id
      };
      this.httpPost(this.API.API_moneyHead, data)
        .then(res => {
          this.infoLoading = false;
          this.moneyInfo = res.data[0] || [];
        })
        .catch(err => {
          this.infoLoading = false;
          console.error(err);
        });
    },
    // 资金列表
    getCapitalList() {
      this.spinShow = true;
      let data = {
        customerCompanyCode: this.chooseCompanyId,
        customerId: this.store_userInfo.id,
        pageNo: this.MX_pageNo,
        pageSize: this.MX_pageSize
      };
      this.httpGet(this.API.API_moneyList, data)
        .then(res => {
          this.moneyList = res.data.rows;
          this.totalSize = res.data.totalRows;
          this.spinShow = false;
        })
        .catch(err => {
          this.spinShow = false;
          console.error(err);
        });
    },
  }
}
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";

.price_styl {
  width: 100%;
  .title_styl {
    .flex-x();
    padding: 8px 0 10px 0;
    background-color: #ffffff;

    .title_left {
      .flex-x(flex-start);
      .title_name {
        margin-left: 17px;
        font-size: 16px;
        font-weight: bold;
      }
      .title_desc {
        margin-left: 20px;
        font-size: 12px;
        color: #999999;
      }
    }
  }

  .bill_search {
    width: 100%;
    background-color: #ffffff;

    .search_content {
      padding: 0 12px 12px 12px;
      font-size: 12px;

      .bill_status {
        .flex-x(flex-start);

        .status_title {
          margin-right: 20px;
          color: #9e9e9e;
        }
        .status_name {
          padding: 5px 10px;
          margin-right: 30px;
          cursor: pointer;
        }
        .status_nameCopy {
          padding: 5px 10px;
          border-radius: 4px;
          color: @themeColor;
          background-color: #eaf0fd;
        }
        .time_choose {
          .flex-x(flex-start);

          .time_title {
            padding: 5px 10px;
            margin: 0 4px 0 8px;
            border-radius: 4px;

            color: @themeColor;
            background-color: #eaf0fd;
          }
          .btn_search {
            .flex-x(center);
            width: 70px;
            padding: 4px 10px;
            margin-left: 10px;
            border-radius: 4px;
            color: #ffffff;
            background-color: @themeColor;
            cursor: pointer;
          }
          .btn_reset {
            .flex-x(center);
            width: 70px;
            padding: 4px 10px;
            margin-left: 10px;
            color: #333333;
            border-radius: 4px;
            border: 1px solid #dcdee2;
            background-color: #ffffff;
            cursor: pointer;
          }
        }
      }
      .time_styl {
        margin-top: 10px;
      }
    }
  }
  .company_price {
    margin: 12px 0 0 0;
    background-color: #ffffff;

    .price_num {
      .flex-x();
      padding: 0 150px 20px 150px;
      border-bottom: 1px solid #f0f0f0;

      .price_item {
        .item_num {
          font-size: 18px;
          font-weight: bold;
        }
        .item_title {
          margin-top: 6px;
          font-weight: 16px;
          color: #666666;
        }
      }
    }
    .company_styl {
      .flex-x();
      padding: 20px 24px;
      .company_ptice {
        position: relative;
        .flex-x(center);
        flex-grow: 1;

        .cprice_item {
          margin-right: 40px;
          font-size: 12px;
          color: #424968;
          .cprice_num {
            margin-left: 4px;
            font-size: 18px;
            font-weight: bold;
          }
        }

        .margin4 {
          margin-right: 4px;
        }
      }
    }
  }
  .page_styl {
    width: 100%;
    margin-top: 30px;
    text-align: right;
  }
}
</style>
